<!-- 编辑器页面 -->
<template>
  <div class="main">
    <div id="components-layout">
      <a-tabs v-model:activeKey="activeTabKey" @change="changeTabs">
        <a-tab-pane key="editTemplate" tab="模板编辑">
          <a-layout id="editTemplate">
            <a-layout-header>
              <div class="handler">
                <p class="version">
                  {{ version }}
                </p>
                <a-button
                  type="primary"
                  @click="saveTemplate"
                  style="margin-left: 20px"
                >
                  保存模板
                </a-button>
                <a-button
                  style="margin-left: 20px"
                  type="primary"
                  ghost
                  @click="fullScreenEvent"
                >
                  全屏编辑
                </a-button>
                <a-button
                  ghost
                  type="primary"
                  @click="resetTemplateModel"
                  style="margin-left: 20px"
                >
                  重置模板
                </a-button>
              </div>
            </a-layout-header>
            <a-layout id="pageMain">
              <!-- container  and right layout-->
              <template v-if="$store.state.BGIMG.ID != 'MAP'">
                <edit-svg-model ref="editSvgModel" />
              </template>
              <template v-if="$store.state.BGIMG.ID == 'MAP'">
                <edit-gaode-map-model ref="editMapModel" />
              </template>
            </a-layout>
          </a-layout>
        </a-tab-pane>
        <a-tab-pane key="TemplateLists" tab="模板列表">
          <div id="TemplateLists">
            <template-lists
              ref="changeTabs"
              @editSvgTemplate="editSvgTemplate"
            />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import templateLists from '@/views/svgModel/templateLists.vue';
import editGaodeMapModel from '@/views/mapModel/editGaodeMapModel.vue';
import editSvgModel from '@/views/svgModel/editSvgModel.vue';
import {
  addComponent,
  version,
  listComponent,
  deleteComponent,
} from '@/network/api';
import { fullScreen } from '@/util/index';
import screenfull from 'screenfull';
export default {
  emits: ['editSvgTemplate'],
  components: {
    templateLists,
    editSvgModel,
    editGaodeMapModel,
  },
  data() {
    return {
      version: version,
      environment: process.env.NODE_ENV,
      activeTabKey: 'TemplateLists',
      submitTemplateVisiable: false,
      isFullscreen: false,
      getPopupContainer: null, //全屏节点
    };
  },
  provide() {
    return {
      getScreenStatus: () => this.isFullscreen,
      getScreenFullNode: () => this.getPopupContainer,
    };
  },
  created() {
    //监听全屏幕变化
    screenfull.on('change', () => {
      this.isFullscreen = screenfull.isFullscreen;
      if (screenfull.isFullscreen) {
        this.$store.setCurrentWindowAttributes({
          height: window.screen.availHeight,
          width: window.screen.availWidth,
          absoluteHeight: window.screen.height,
          absoluteWidth: window.screen.width,
        });
      } else {
        this.activeTabKey == 'editTemplate'
          ? this.$store.setCurrentWindowAttributes({
              height: document.getElementById('pageMain').clientHeight - 190,
              width: document.getElementById('pageMain').clientWidth,
              absoluteHeight: window.screen.height,
              absoluteWidth: window.screen.width,
            })
          : '';
      }
    });
  },
  mounted() {
    // 监听窗口变化
    let _this = this;
    window.addEventListener('resize', function () {
      if (_this.activeTabKey == 'editTemplate') {
        _this.$store.setCurrentWindowAttributes({
          height: document.getElementById('pageMain').clientHeight - 190,
          width: document.getElementById('pageMain').clientWidth,
          absoluteHeight: window.screen.height,
          absoluteWidth: window.screen.width,
        });
      }
    });
    this.changeTabs('editTemplate');
    this.$nextTick(() => {
      this.$store.setCurrentlySelectBase64DataAction({
        ID: 'MAP',
        TYPE: 'default',
        BASE64DATA: '',
      });
    });
  }, 
  methods: {
    saveTemplate() {
      const editModalName =
        this.$store.state.BGIMG.ID == 'MAP' ? 'editMapModel' : 'editSvgModel';
      this.$refs[editModalName].changeSubmitTemplateVisiable(true);
    },
    fullScreenEvent() {
      const fullScreenNode = document.getElementById('pageMain');
      this.getPopupContainer = fullScreenNode;
      fullScreen(fullScreenNode).then((res) => {
        this.isFullscreen = res.status;
      });
    },
    resetTemplateModel() {
      this.$refs.editSvgModel.resetTemplateModel();
    },
    editSvgTemplate(val) {
      let _this = this;
      this.$nextTick(() => {
        let key = 'editTemplate';
        _this.changeTabs(key);
        //组件
        let bgImg = {
          ID: val.base64Data ? '' : 'FirstOneBgImg',
          TYPE: val.base64Data ? 'bgImg' : 'default',
          BASE64DATA: val.base64Data ? val.base64Data : '#000000',
        };
        this.$store.setCurrentlySelectBase64DataAction(bgImg);
        setTimeout(() => {
          this.$refs.editSvgModel.editSvgTemplate(val);
        }, 0);
      });
    },
    changeTabs(activeKey) {
      this.activeTabKey = activeKey;
      this.$nextTick(() => {
        this.initDiv(activeKey);
        switch (activeKey) {
          case 'editTemplate':
            this.$refs.editSvgModel.getLeftComponents();
            this.watchEditTemplate();
            //设置屏幕宽高
            this.$store.setCurrentWindowAttributes({
              height: document.getElementById('pageMain').clientHeight - 190,
              width: document.getElementById('pageMain').clientWidth,
              absoluteHeight: window.screen.height,
              absoluteWidth: window.screen.width,
            });
            break;
          case 'TemplateLists':
            this.$nextTick(() => {
              this.$refs.changeTabs.getTemplateList();
            });
            break;
        }
      });
    },
    watchEditTemplate() {
      let _this = this;
      this.$nextTick(() => {
        _this.initDiv('editTemplate');
      });
    },
    initDiv(val) {
      this.$nextTick(() => {
        const oIframe = document.getElementById(val);
        // const deviceWidth = document.documentElement.clientWidth;
        this.deviceHeight = document.documentElement.clientHeight;
        // oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
        oIframe.style.height = Number(this.deviceHeight) - 120 + 'px'; //数字是页面布局高度差
      });
    },
  },
};
</script>

<style scoped lang="less">
.handler {
  text-align: right;

  .version {
    float: left;
    font-size: 15px;
    font-weight: bold;
    color: #c9c9c9;
  }
}

.button {
  display: flex;

  div {
    text-align: center;
    flex: 1;
  }
}

#components-layout .ant-layout-header {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  line-height: 50px;
  height: 50px;
  background: #fff;
  color: rgb(0, 0, 0);
  padding: 0;
  z-index: 2;
  box-shadow: 1px 1px 5px #ddd;
}

#pageMain {
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  bottom: 0;
}

#components-layout .ant-layout-sider {
  background: #fff;
  color: rgb(167, 164, 164);
}
</style>
